"use strict";

////////////////////////////////////////////////////////////////////////////////
// IMPORTS

import React, {
    Component,
} from 'react';
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableHighlight
} from 'react-native';
import NavButton 
from 'NavButton.js';

////////////////////////////////////////////////////////////////////////////////
// STYLES

var styles = StyleSheet.create({
    button: {
        backgroundColor: 'white',
        padding: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#CDCDCD',
    }
});

////////////////////////////////////////////////////////////////////////////////
// COMPONENTS

class NavMenu extends React.Component {
    render() {
        return (
            <ScrollView style={styles.scene}>
                <Text style={styles.messageText}>{this.props.message}</Text>
                <NavButton
                    onPress={() => {
                        this.props.navigator.push({
                            message: 'Swipe right to dismiss',
                            sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                        });
                    } }
                    text="Float in from right"
                    />
                <NavButton
                    onPress={() => {
                        this.props.navigator.push({
                            message: 'Swipe down to dismiss',
                            sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
                        });
                    } }
                    text="Float in from bottom"
                    />
                <NavButton
                    onPress={() => {
                        this.props.navigator.pop();
                    } }
                    text="Pop"
                    />
                <NavButton
                    onPress={() => {
                        this.props.navigator.popToTop();
                    } }
                    text="Pop to top"
                    />
                <NavButton
                    onPress={() => {
                        this.props.navigator.push({ id: 'navbar' });
                    } }
                    text="Navbar Example"
                    />
                <NavButton
                    onPress={() => {
                        this.props.navigator.push({ id: 'jumping' });
                    } }
                    text="Jumping Example"
                    />
                <NavButton
                    onPress={() => {
                        this.props.navigator.push({ id: 'breadcrumbs' });
                    } }
                    text="Breadcrumbs Example"
                    />
                <NavButton
                    onPress={() => {
                        this.props.onExampleExit();
                    } }
                    text="Exit <Navigator> Example"
                    />
            </ScrollView>
        );
    }
}